{extend name="base" /}
{block name="body"}
<link rel="stylesheet" href="/static/dist/basic.min.css" />
<link rel="stylesheet" href="/static/dist/dropzone.min.css" />

<div class="layui-card">
    <div class="layui-card-header">用户说明</div>
    <div class="layui-card-body" pad15>
        <div class="layui-form" wid100 lay-filter="">
            <form action="{:url('admin/info/index')}" class="layui-form" method="post" id="editform">
                <div class="layui-form-item">
                    <label class="layui-form-label">主图</label>
                    <div class="layui-input-block">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="test-upload-normal-img" src="{$list.pic|default=''}" width="400" height="200">
                        </div>
                        <input type="hidden" name="pic" value="{$list.pic|default=''}" autocomplete="off" placeholder="" class="layui-input">
                        <button type="button" class="layui-btn ajax-avatar"><i class="fa fa-file-image-o"></i> 选择图片</button>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">视频上传</label>
                    <div class="layui-input-block">
                        <div class="dropzone" id="doc_area"></div>
                    </div>
                </div>

                <input name="video" hidden="hidden" id="video" value="{$list.video}">
                <input id="count" value="0" hidden="hidden">

                <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block">
                        <input name="content" hidden="hidden" value="{$list.content}">
                        <script id="editor" type="text/plain" ></script>
                    </div>
                </div>
            </form>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="sub"  lay-filter="*">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<textarea hidden="hidden" id="htmlcon">{$list.content}</textarea>


{/block}


{block name="js"}
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script src="/static/dist/dropzone.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.js"> </script >
<script>
    var ue = UE.getEditor( 'editor', {

        autoHeightEnabled: true,

        autoFloatEnabled: true,

        initialFrameWidth: 580,

        initialFrameHeight:400,
    });

    ue.ready(function() {
        var htmlcon=$('#htmlcon').text();
        ue.setContent(htmlcon);
    });

    var myDropzone = $("#doc_area").dropzone({
        autoProcessQueue: true, //自动上传
        url: "picture",//文件提交地址
        method:"post",  //也可用put
        paramName:"file", //默认为file
        maxFiles:1,//一次性上传的文件数量上限
        maxFilesize: 1024, //文件大小，单位：MB
        acceptedFiles: ".mp4,.webm,.ogg", //上传的类型
        uploadMultiple: true,
        addRemoveLinks:true,
        params:{'rsort': $('#rrsort').val()},
        parallelUploads: 1,//一次上传的文件数量
        //previewsContainer:"#preview",//上传图片的预览窗口
        dictDefaultMessage:'拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传20个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.mp4,*.webm,*.ogg",
        dictFallbackMessage:"浏览器不受支持",
        dictFileTooBig:"文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init: function() {
            myDropzone = this; // closure
            //添加了文件的事件
            this.on("addedfile", function () {
                var count = $('#count').val();
                $('#count').val(count + 1);
            });
            this.on("removedfile", function(file,data) {
                var count = $('#count').val();
                $('#count').val(count - 1);
            });
        },
        success: function(file, response, e) {
            var res = JSON.parse(response);
            if(res.code == 0){
                alert('上传失败请刷新页面再试');
            }else{
                $('#video').val(res.path);
            }
        }
    });

    $('#sub').click(function(){

        $('input[name="content"]').val(ue.getContent());

        if($('input[name="content"]').val() == ''){
            layer.open({
                content: '内容必须填写' //这里content是一个普通的String
            });
            return;
        }

        if($('input[name="pic"]').val() == ''){
            layer.open({
                content: '图片必须上传' //这里content是一个普通的String
            });
            return;
        }


        $('#editform').submit();
    })
</script>
{/block}